<!DOCTYPE html>
<html>
	<head>
		<title>Register</title>
		<% include ./common/link %>
		<style type="text/css">
			
			.col-auto-center{
				float: none; 
				margin-left:auto;
				margin-right:auto;
				display:block;
			}
			.warning{
				color:green
			}
			.alert{
				color:red
			}
		</style>
	</head>
	<body>
		<% include common/header %>
		<div class="container-fluid col-xs-8 col-md-4 col-auto-center" style="margin-top:5%">

			<h3 class="text-center">Register</h3>
			<form action="/users/register" method="post" class="form-horizontal" id="form_register">
				<div class="form-group" >
					<div class="col-md-3 text-right">
						<label class="control-label">Username</label>
					</div>
					<div class="col-md-6">
						<input type="text" required class="form-control" id="exampleInputUsername1" placeholder="Username" name="username" onblur="checkUsername(this)">
						<span></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-3 text-right">
						<label class="control-label">Password</label>
					</div>
					<div class="col-md-6">
						<input type="password" required class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
						<span></span>
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-3 text-right">
						<label class="control-label">Confirm Password</label>
					</div>
					<div class="col-md-6">
						<input type="password" required class="form-control" id="exampleConInputPassword1" placeholder="Confirm Password" name="conpassword">
						<span></span>
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-3 text-right">
						<label for="exampleInputSex1" class="control-label">Sex</label>
					</div>
					<div class="col-md-6">
						<label class="radio-inline"><input type="radio" required value="1" name="sex">Male</input></label>
						<label class="radio-inline"><input type="radio" required value="2" name="sex">Female</input></label>
						<label class="radio-inline"><input type="radio" required value="3" name="sex">Unknown</input></label>
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-3 text-right">
						<label for="exampleInputAge1" class="control-label">Age</label>
					</div>
					<div class="col-md-6">
						<input class="form-control" type="number" min=1 name="age" id="exampleInputAge1" placehoder="Age"></input>
						<span></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-3 text-right">
						<label for="exampleInputEmail1" class="control-label">Email</label>
					</div>
					<div class="col-md-6">
						<input class="form-control" type="email" required  name="email" id="exampleInputEmail1" placehoder="Email" onblur="checkEmail(this)"></input>
						<span></span>
					</div>

				</div>
				<div class="form-group">
					<div class="col-md-3 text-right">
						<label for="exampleInputPhone1" class="control-label">Phone</label>
					</div>
					<div class="col-md-6">
						<input class="form-control" type="text" name="phone" id="exampleInputPhone1" placehoder="Phone"></input>
						<span></span>
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-4  col-auto-center">
						<button class="btn btn-primary" id="btn_register" >Register</button>
						<input type="reset" class="btn btn-danger" value="Reset">
						<span></span>
					</div>
				</div>
			</form>
		</div>
		<% include common/footer %>
	</body>
	<script type="text/javascript">
		var username_pass = false;
		var email_pass = false;

		function checkUsername(frame){
			var username = $(frame).val();
			$.post('/users/verifyUsername',{username:username},function(msg){
				if(msg.result === 1){
					$('input[name="username"]').next().html("user name avaliable");
					$('input[name="username"]').next().attr("class","warning");
					username_pass = true;
				}else{
					$('input[name="username"]').next().html(msg.err);
					$('input[name="username"]').next().attr("class","alert");
					username_pass = false;
				}
			});
		}
		function checkEmail(frame){
			var email = $(frame).val();
			$.post('/users/verifyEmail',{email:email},function(msg){
				if(msg.result === 1){
					$('input[name="email"]').next().html("email address avaliable");
					$('input[name="email"]').next().attr("class","warning");
					email_pass = true;
				}else{
					$('input[name="email"]').next().html(msg.err);
					$('input[name="email"]').next().attr("class","alert");
					email_pass = false;
				}
			});
		}
		$("#btn_register").click(function(){
			var pwd = $("#exampleInputPassword1").val();
			var conpwd = $("#exampleConInputPassword1").val();
			
			if(username_pass && email_pass){
				if(pwd != conpwd){
					alert("please make sure you input the same passwords.");
				}else{
					$("#form_register").submit();
				}
			}
		});
	</script>
</html>